<template>
  <div class="uc-feedback column full-width">
    <div v-for="(fb, idx) in data.docs || []" :key="idx"
      class="uc-feedback-item column no-wrap justify-center q-mb-md cursor-pointer">

      <div class="uc-feedback-item-content-row row no-wrap items-center relative-position">
        <div
          class="uc-feedback-item-content col row items-center q-pa-md">
          {{ fb.内容 }}
        </div>

        <div class="column text-center justify-around">
          <div class="uc-feedback-item-status q-px-xl q-py-sm col" :class="`status-${fb.Status}`">
            {{ fbStatus[fb.Status] || '待处理' }}</div>
          <div class="uc-feedback-item-date q-px-xl q-py-sm col">
            {{ fb.LastUpdateDate | normalDate }}</div>
        </div>
      </div>

      <div class="uc-feedback-item-reply q-pa-md text-bold" v-if="fb.意见">{{ fb.意见 }}</div>
    </div>

    <div v-if="data && data.total === 0" class="no-data-label">
      <div class="absolute-center">
        {{$t('暂无数据')}}
      </div>
    </div>

    <pagination v-if="data && data.total" :data="data" @changed="pageChanged"></pagination>
  </div>
</template>

<script>
import mixins from 'eis-admin-mixins';
import pagination from '../../components/pagination.vue';

export default {
  name: 'UCFeedback',
  mixins: [mixins.ObjectDataMixin],
  components: {
    pagination,
  },
  computed: {
    fbStatus() {
      return {
        0: '待处理',
        1: '已回复',
        '-1': '驳回',
      };
    },
  },
  methods: {
    pageChanged(p) {
      this.refreshData({ page: p });
    },
  },
};
</script>

<style lang="scss" scoped>
.uc-feedback {
  min-height: 300px;
  border-radius: 5px;
  &-item {
    min-height: 60px;

    &-content-row {
      border: 1px solid #e0e0e0;
    }

    &-content {
      border-right: 1px solid #e0e0e0;

    }

    &-reply {
      border: 1px solid #e0e0e0;
      border-top: none;
    }

    &-status {
      border-bottom: 1px solid #e0e0e0;
      margin: auto 0;

      &.status-0 {
        color: #ff9800;
      }
      &.status-1 {
        color: #4caf50;
      }
      &.status--1 {
        color: #f44336;
      }
    }
  }
}
</style>
